<template>
  <div id="classify-page" class="article-list">
    <div class="list-cover">
      <img class="list-cover-img" src="/images/list_bg.jpg">
      <p class="list-cover-icon">
        <img :src="classify&&classify.icon?`${apiBase}/${classify.icon}`:'/images/classify.png'">
      </p>
      <p class="list-cover-desc ellipsis" v-if="classify">{{classify.desc?classify.desc:classify.name}}</p>
    </div>
    <el-skeleton :rows="15" animated :loading="skeletonShow"/>
    <div class="article-list" v-if="!skeletonShow">
      <article-item v-for="item in list" :key="item.id" :data="item"></article-item>
      <article-empty v-if="total===0"></article-empty>
    </div>
    <div class="page" v-if="!skeletonShow">
      <el-pagination
        background
        :currentPage="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="pageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const { public: { apiBase },public: { siteTitle } } = useRuntimeConfig()
const route = useRoute()
const { articleApi,classifyApi } = useApi()
const skeletonShow = ref(true)
const page = ref(Number(route.query.page)||1)
const limit = 8
interface classify {
  name:string,
  desc:string
}
const setHead = (classify:classify) => {
  useHead({
    title:`${classify.name}|${siteTitle}`,
    meta: [
       {
         hid: 'description',
         name: 'description',
         content: classify.desc||'达文西的快乐星球，个人技术博客'
       },
       {
         hid: 'keywords',
         name: 'keywords',
         content: `${classify.name},达文西的快乐星球,SNBLOG`
       }
     ]
  })
}
let [{data:classify},{data:{total},data:{list}}] = await Promise.all([
    classifyApi.getDetail(Number(route.query.classifyId)),
    articleApi.getList({page:page.value,limit:limit,classifyId:route.query.classifyId})
])
skeletonShow.value = false
setHead(classify)
const pageChange = async (value:number) => {
  page.value = value
  await navigateTo({
    path:'/classify',
    query:{
      page:value,
      classifyId:route.query.classifyId
    }
  })
}

watch(() => route.query, async ()=>{
  skeletonShow.value = true
  classify = null
  const [{data:resultClassify},{data:{total:resultTotal},data:{list:resultList}}] = await Promise.all([
    classifyApi.getDetail(Number(route.query.classifyId)),
    articleApi.getList({page:page.value,limit:limit,classifyId:route.query.classifyId})
  ])
  classify = resultClassify
  total = resultTotal
  list = resultList
  setHead(resultClassify)
  skeletonShow.value = false
})
</script>

<style lang="less">
  @import "../assets/styles/pages/article-list.less";
</style>
